@extends('public.main')
@section('title')
    {{ strip_tags($picture->title) }}
@endsection

@section('css')
    <meta name="keywords" content="{{ $picture->keywords }}"/>
    <meta name="description" content="{{ $picture->description }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/static/css/detail.css') }}">
    <style>
        /* The Modal (background) */
        .modal_pc {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 110px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }

        /* Modal Content (image) */
        .modal-content_pc {
            margin: auto;
            display: block;
            height:80%;
            max-width: 700px;
        }

        /* Caption of Modal Image */
        #caption_pc {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        /* Add Animation */
        .modal-content_pc, #caption_pc {
            -webkit-animation-name: zoom;
            -webkit-animation-duration: 0.6s;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @-webkit-keyframes zoom {
            from {-webkit-transform: scale(0)}
            to {-webkit-transform: scale(1)}
        }

        @keyframes zoom {
            from {transform: scale(0.1)}
            to {transform: scale(1)}
        }

        /* The Close Button */
        .close_pc {
            position: absolute;
            top: 50px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close_pc:hover,
        .close_pc:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
            .modal-content_pc {
                width: 100%;
            }
        }
    </style>
@endsection

@section('content')
    <div class="container">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-8 col-xs-8">
                <div class="col-md-12 col-xs-12 content_left">
                    <div class="col-md-12 col-xs-12 item_article">
                        <div class="col-md-12 col-xs-12" style="margin:0;padding:0;margin-top:10px ">
                            <h3>
                                {!! $picture->title !!}
                            </h3>
                        </div>
                        <div class="col-md-12 col-xs-12 item_content">
                            @if( $picture->type==0 )
                                <img src="{{ $picture->imgurl }}" onclick="show_modal(this)" alt="{!! $picture->description !!}" style="max-width: 100%;"/>
                            @elseif( $picture->type==1 )
                                <img src="{{ asset($picture->imgurl) }}" onclick="show_modal(this)" alt="{!! $picture->description !!}" style="max-width: 100%;"/>
                            @endif
                        </div>
                        <div id="article_id" style="display:none;">{{ $picture->id }}</div>
                        @if(Session::get('user')!=null)
                            <div id="user_id" style="display:none;">{{ Session::get('user')->id }}</div>
                        @endif
                        <div class="col-md-12 col-xs-12 detail_button">
                            @if( $before == null )
                                <a role="button" class="col-md-3 col-lg-3 col-xs-3 btn btn-default disabled" href="/pictureDetail/{{ $before }}.html">上一条</a>
                            @else
                                <a role="button" class="col-md-3 col-lg-3 col-xs-3 btn btn-default" href="/pictureDetail/{{ $before }}.html">上一条</a>
                            @endif

                            @if( $next == null )
                                    <a role="button" class="col-md-6 col-lg-4 col-xs-4 col-xs-offset-1 col-md-offset-1 col-lg-offset-1 btn btn-default disabled" style="background:black;color:white;" href="/pictureDetail/{{ $next }}.html">下一条，你懂得</a>
                            @else
                                    <a role="button" class="col-md-6 col-lg-4 col-xs-4 col-xs-offset-1 col-md-offset-1 col-lg-offset-1 btn btn-default" style="background:black;color:white;" href="/pictureDetail/{{ $next }}.html">下一条，你懂得</a>
                            @endif

                            <a type="button" class="col-md-3 col-lg-3 col-xs-3 col-xs-offset-1 col-md-offset-1 col-lg-offset-1 btn btn-default">收藏本页面</a>
                        </div>
                        <div class="col-md-12 col-xs-12 item_praise">
                            <div class="praise_first">
                                {{ $picture->praise }} 好笑
                            </div>
                            <div class="praise_point">
                                ·
                            </div>
                            <div class="praise_second">
                                <a href="#" style="color:#999999" id="comment_num">107 评论</a>
                            </div>
                        </div>
                        <div class="col-md-12 col-xs-12 item_img">
                            <div style="float:left;">
                                <a href="#"><img src="{{ asset('/static/img/good.png') }}" style="width:20px;height:20px;"/></a>
                                <a href="#"><img src="{{ asset('/static/img/bad.png') }}" style="width:20px;height:20px;margin-left:20px;"/></a>
                                <a href="#"><img src="{{ asset('/static/img/comments.png') }}" style="width:20px;height:20px;margin-left:20px;"/></a>
                            </div>
                            <div style="float:right;">
                                <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                                <script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":"4056993719","tqq":"101212621"},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["qzone","tsina","weixin"],"viewText":"分享到：","viewSize":"24"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                            </div>
                        </div>
                    </div>
                </div>

                {{--进行评论--}}
                @if(Session::get('user')!=null)
                    <div class="col-md-12 col-xs-12">
                        <div class="col-md-12 col-xs-12 doComment">
                            <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;">
                                <textarea class="form-control" rows="2" style="margin-top:20px;" id="text_area" placeholder="写点什么。。"></textarea>
                            </div>
                            <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                                <div style="float:left;margin-top:5px;">还剩余<span id="remaining_word">200</span>个字符</div>
                                <div style="float:right;">
                                    <button type="button" class="btn btn-success" onclick="pushComment()">评论</button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @if(Session::get('user')==null)
                    <div class="col-md-12 col-xs-12">
                        <div class="col-md-12 col-xs-12 doComment" style="height:50px;">
                            <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                                <div style="float:left;margin-top:5px;">请<a data-toggle="modal" href="#" data-target="#myModal">登录</a>后再进行评论</div>
                            </div>
                        </div>
                    </div>
                @endif
                {{--评论--}}
                <div class="col-md-12 col-xs-12 content_left">
                    <div class="col-md-12 col-xs-12 comment">
                        <h4>评论</h4>
                        @foreach( $picture_comments as $picture_comment )
                            <div>
                                <hr style="width:98%;border:1px solid #e7e5e2;margin:0;"/>
                                <div class="col-md-12 col-xs-12" style="margin-top:10px;margin-bottom:10px;">
                                    <div class="col-md-1 col-xs-1" style="margin:0px;padding:0px;">
                                        <img src="{{ $picture_comment->avatar }}" class="img-circle" style="width:40px;height:40px;"/>
                                    </div>
                                    <div class="col-md-11 col-xs-11" style="margin:0px;padding:0px;">
                                        <div class="col-md-12 col-xs-12 comment_name" style="margin:0px;padding:0px;">
                                            {{ $picture_comment->name }}
                                        </div>
                                        <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;">
                                            {{ $picture_comment->content }}
                                        </div>
                                        @if( $picture_comment->reply_name !=null )
                                            <div class="col-md-12 col-xs-12" style="margin:0px;padding:5px;border:1px solid #e7e5e2;background:#f7f7f7;margin-top:5px;">
                                                <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;color:#9b8878;">{{ $picture_comment->reply_name }}</div>
                                                <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;">{{ $picture_comment->reply_content }}</div>
                                            </div>
                                        @endif

                                        <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;margin-top:5px;">
                                            <div style="float:left;font-size:10px;color: #6b7d86">
                                                {{ $picture_comment->created_at }}
                                            </div>
                                            <div style="float:right;">
                                                <a href="#" style="font-size:10px;color:#6b7d86;" class="reply_btn">回复</a>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-xs-12 reply" style="margin:0px;padding:0px;display:none;">
                                            <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;">
                                                <textarea class="form-control" rows="2" style="margin-top:10px;" id="reply_area" placeholder="写点什么。。"></textarea>
                                            </div>
                                            <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                                                <div style="float:right;">
                                                    <div class="reply_name" style="display: none;">{{ $picture_comment->name }}</div>
                                                    <div class="reply_content" style="display: none;">{{ $picture_comment->content }}</div>
                                                    <button type="button" class="btn btn-success comment_replay">评论</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="col-md-12 col-xs-12 content_right">
                    <div class="col-md-12 col-xs-12">
                        <h4>快来扫一扫微信二维码，更多精彩内容等你来发现。</h4>
                        <img src="{{ asset('/static/img/erweima.jpg') }}" style="max-width: 100%">
                    </div>
                    <div class="col-md-12 col-xs-12">
                        <iframe width="100%" height="400" class="share_self" frameborder="0" scrolling="no"
                                src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=400&fansRow=1&ptype=1&speed=0&skin=9&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=5605043482&verifier=f260c920&dpc=1"></iframe>
                    </div>
                    <script type="text/javascript">
                        document.write('<a style="display:none!important" id="tanx-a-mm_56967596_36728993_134034968"></a>');
                        tanx_s = document.createElement("script");
                        tanx_s.type = "text/javascript";
                        tanx_s.charset = "gbk";
                        tanx_s.id = "tanx-s-mm_56967596_36728993_134034968";
                        tanx_s.async = true;
                        tanx_s.src = "http://p.tanx.com/ex?i=mm_56967596_36728993_134034968";
                        tanx_h = document.getElementsByTagName("head")[0];
                        if(tanx_h)tanx_h.insertBefore(tanx_s,tanx_h.firstChild);
                    </script>
                </div>
            </div>
        </div>
    </div>
    <!-- The Modal -->
    <div id="myModal_pc" class="modal_pc">
        <span class="close_pc">×</span>
        <img class="modal-content_pc" id="img01">
        <div id="caption_pc"></div>
    </div>
@endsection

@section('script')
    <script>

    </script>
@endsection